<template>
    <div class="roleManage-wrapper">
        <div class="flex-row">
            <div class="flex_side">
                <a-card :bordered="false">
                    <div slot="title" class="flex user_header">
                        <h3 class="title">角色列表</h3>
                        <a-button
                            type="primary"
                            icon="plus"
                            class="select-bottom"
                            :disabled="hasPerm(['sys:role:add'])"
                            @click="addInfo()">添加</a-button> 
                    </div>
                    <div class="side_search">
                        <a-input-search v-model="form.roleName" placeholder="请输入搜索" allowClear enter-button @search="search"/>
                    </div>
                    <div class="side_box flex-column">
                        <a-spin v-if="loading" style="margin-top:30px;" />
                        <template v-else>
                            <template v-if="list.length">
                                <div
                                    :class="['side_item', roleName==item.roleName && 'active']"
                                    v-for="(item,index) in list"
                                    :key="item.roleId"
                                    @click="selectRole(item)">
                                    <span class="name">{{item.roleName}}</span>
                                    <a-icon class="icon" v-if="!hasPerm(['sys:role:update'])" @click.stop="addInfo(item)" type="form" />
                                    <a-icon class="icon" v-if="!hasPerm(['sys:role:remove'])" @click.stop="deleteInfo(item,index)" type="delete" />
                                </div>
                            </template>
                            <a-empty v-else />
                        </template>
                    </div>
                </a-card>
            </div>
            <div class="flex_list">
                <a-card :hoverable="true" :bordered="false">
                    <div slot="title" class="flex user_header">
                        <h3 class="title">用户列表</h3>
                        <a-button
                            type="default"
                            icon="plus"
                            disabled
                            class="select-bottom">
                            批量加入用户
                        </a-button>
                    </div>
                    <user-list ref="user" :params="{'roleName':roleName}"></user-list>
                </a-card>
            </div>
    
        </div>
        <template v-if="isShowInfo">
            <role-info
                @ok="submit"
                @cancel="isShowInfo = false"
                :info="itemInfo"/>
        </template>
    </div>
</template>

<script>
import { remoteList,deleteInfo } from '@/api/system/role';
import RoleInfo from './components/info';
import UserList from '@/views/system/components/UserList'

export default {
    name: 'roleManage',
    components: { UserList,RoleInfo },
    data() {
        return {
            loading:false,
            form:{
                roleName:'',
                page:1,
                size:100
            },
            list:[],
            roleName:'',
            itemInfo: null,
            isShowInfo: false
        };
    },
    created(){
        this.search();
    },
    methods: {
        //查询
        async search() {
            try {
                this.loading = true;
                this.list = [];
                let res = await remoteList(this.form);
                let { list, total } = res.data;
                this.list = list;
                this.total = total;
            } finally {
                this.loading = false;
            }
        },
        //新增 or 编辑
        addInfo(row={}) {
            this.isShowInfo = true;
            this.itemInfo = { ...row };
        },
        //删除
        deleteInfo(item,index) {
            this.$confirm({
                title: '提示',
                content: '确定要删除该角色吗？',
                okText: '确定',
                cancelText: '取消',
                onOk:async ()=>{
                    try{
                        let res = await deleteInfo({ids:[item.roleId]});
                        let {code} = res;
                        if(code==200){
                            this.$message.success('删除成功!');
                            this.list.splice(index,1)
                        }
                        // this.search(1);
                    }catch(err){

                    }
                },
                onCancel() {}
            });
        },
        //信息编辑确认
        submit(){
            this.isShowInfo = false;
            this.search(1)
            this.$refs.user.search(1);
        },
        //选择角色名称
        selectRole(item){
            this.roleName = item.roleName;
        }
    },
};
</script>
<style lang="scss" scoped>
.flex_side{
    margin-right: 25px;
    width: 260px;
    flex-shrink: 0;
    background: #fff;
    .side_box{
        margin-top: 15px;
        .side_item{
            display: flex;
            align-items: center;
            padding: 0 10px;
            margin: 2px 0;
            height: 32px;
            line-height: 32px;
            font-size: 14px;
            color: #666;
            border-radius: 4px;
            cursor: pointer;
            .name{
                flex: 1;
            }
            .icon{
                margin-left: 10px;
                font-size: 16px;
            }
            &:hover{
                color: #fff;
                background: rgba($color: $primary-color, $alpha: .7);
            }
            &.active{
                color: #fff;
                background: $primary-color;
            }
        }
    }
}
.user_header{
    width: 100%;
    align-items: center;
    .title{
        flex: 1;
    }
}
.flex_list{
    flex: 1;
}
</style>
